@import "../../sassmixins/mixins";

@function px2em($px, $base-font-size: 64px) {
  @return $px / $base-font-size * 1em;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  background-image: url("../image/bg.jpg");
  background-size: 100% 100%;
}

.container {
  font-size: 1rem;
  padding-top: px2em(56px);
  padding-bottom: px2em(18px);
  @include center-block;
  width: 10rem;
  .pan-outer {
    @include size(10em, px2em(713px));
    background-image: url("../image/pan-outer.png");
    background-size: 100% 100%;
    font-size: 1em;
    position: relative;

    .pan-inner {
      @include size(px2em(499px), px2em(499px));
      background-image: url("../image/pan-inner.png");
      background-size: 100% 100%;
      position: relative;
      top: px2em(178px);
      left: px2em(70px);
    }

    .zhizhen {
      @include size(px2em(193px), px2em(255px));
      background-image: url("../image/zhizhen.png");
      background-size: 100% 100%;
      position: absolute;
      top: px2em(269px);
      left: px2em(225px);
    }
  }

  .word {
    height: px2em(134px);
    width: 10em;
    background-image: url("../image/word.png");
    background-size: 100% 100%;
    margin-top: px2em(22px);
  }

  .btn-area {
    margin-top: px2em(25px);
    height: px2em(66px);
    font-size: 1em;
    position: relative;

    .again {
      @include size(px2em(168px), px2em(65px));
      background-image: url("../image/again.png");
      background-size: 100% 100%;
      position: absolute;
      top: 0;
      left: px2em(143px);
    }

    .back {
      @include size(px2em(239px), px2em(72px));
      background-image: url("../image/more.png");
      background-size: 100% 100%;
      position: absolute;
      bottom: 0;
      right: px2em(200px);
    }
  }
}
